
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        #pic{width:391px;
            height:479px;
            position:relative;
        }
        #p1{height:40px;
            background-color:rgba(255,255,255,0.3);
            position:absolute;
            left:0;
            top:0;
            margin:0;
            width:100%;
            text-align:center;
            line-height:40px;
            color:yellow;
            font-size:22px;
        }
        #p2{height:40px;
            background-color:rgba(255,255,255,0.3);
            position:absolute;
            left:0;
            bottom:0;
            margin:0;
            width:100%;
            text-align:center;
            line-height:40px;
            color:yellow;
            font-size:22px;
        }
        input{
            width: 50px;
            height: 30px;
            margin:20px 20px;
        }
        .active{
            color:#fff;
            background-color:red;
        }
    </style>
</head>
<body>
<div id="dvi1">
    <input type="button" value="图1">
    <input type="button" value="图2">
    <input type="button" value="图3">
    <input type="button" value="图4"><br><br>
    <img src="../素材/1.jpg" width="391" height="479"/>
</div>
<div id="div2">
    <input type="button" value="图1">
    <input type="button" value="图2">
    <input type="button" value="图3">
    <input type="button" value="图4"><br><br>
    <img src="../素材/1.jpg" width="391" height="479"/>
</div>
<script>
    var arr1 = ["../素材/1.jpg","../素材/2.jpg","../素材/3.jpg","../素材/4.jpg"];
    var Div1=document.getElementsByTagName("div")[0];
    var Div2=document.getElementsByTagName("div")[1];
    fn(Div1,"onclick");
    fn(Div2,"onmouseover");
    function fn(Div,atrr){
//        var Div=document.getElementsByTagName("div");
        var links=Div.getElementsByTagName("input");
        var Img=Div.getElementsByTagName("img")[0];
        for(var i=0;i<arr1.length;i++){
            links[i].index=i;
            links[i][atrr]=function(){
                for(var j=0;j<links.length;j++){
                    links[j].className="";
                }
                this.className="active";
                Img.src=arr1[this.index];
            }
        }
    }

</script>
</body>
</html>
